<template>
	<div class="container">
        <div class="y_top row">
            <Input style='width:260px;' v-model="pageData.name" icon="ios-clock-outline" placeholder="按图片类型查找..." ></Input>
            <Button class="interval" type="primary" icon="ios-search" v-on:click="search">搜索</Button>
            <!-- <Button type="success" v-on:click="show">  添加  </Button> -->
            <Button class="interval" type="warning" v-on:click="allremove">  批量删除  </Button>
        </div>
        <div class="y_bottom">
            <div class="y_table">
                <Table   border ref="selection" @on-selection-change="selectAll" :columns="columns7" :data="imageTableData">
                </Table>
                <Spin size="large" fix v-if="loading"></Spin>
            </div>
            
            <!--修改框-->
            <!-- <Spin size="large" fix v-if="loading"></Spin> -->
            <Modal
                v-model="modal1"
                title="查看图片详细信息"
                @on-ok="ok"
                @on-cancel="cancel"
                >
                <Form ref="formValidate"  :model="formValidate" :label-width="80">
                    <FormItem label="图片名称" prop="filename">
                        <Input disabled="disabled" v-model="formValidate.filename" placeholder="标题"></Input>
                    </FormItem>
                    <FormItem label="图片大小" prop="size">
                        <Input disabled="disabled" v-model="formValidate.size" placeholder="请输入作者"></Input>
                    </FormItem>
                    <FormItem label="类型" prop="mimetype">
                        <Input disabled="disabled" v-model="formValidate.mimetype" placeholder="请输入作者"></Input>
                    </FormItem>
					<FormItem  label="路径" prop="path"><!--用于显示详情页之前的值-->
                            <Input disabled="disabled" v-model="formValidate.path" placeholder="请输入..."></Input>
                    </FormItem>
                    <FormItem  label="所属栏目" prop="fieldname"><!--用于显示详情页之前的值-->
                            <Input disabled="disabled" v-model="formValidate.fieldname" placeholder="请输入..."></Input>
                    </FormItem>
                    <FormItem  label="发布者" prop="encoding"><!--用于显示详情页之前的值-->
                            <Input disabled="disabled" v-model="formValidate.encoding" placeholder="请输入..."></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    </FormItem>
                </Form>
                <!--将弹出的模态框的底部进行隐藏 -->
                <div slot="footer">
                </div>
            </Modal>
            <!-- 批量删除确认模态框 -->
            <Modal v-model="isRemoveModal" width="360">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>确认删除</span>
                </p>
                <div style="text-align:center">
                    <p>你确定删除这些数据么，删除后不可恢复哦~</p>
                </div>
                <div slot="footer">
                    <Button type="error" size="large" long :loading="okremove_loading" @click="okremove">删除</Button>
                </div>
            </Modal>
            <div class="container y_tableBottom">
                <div class="row" >
                    <div class="y-tableBtn col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <Button @click="handleSelectAll(true)">全选</Button>
                        <Button @click="handleSelectAll(false)">取消全选</Button>
                    </div>
                    <div class="y_tablePage col-lo-9 col-md-9 col-sm-9 col-xs-12">
                        <Page :total='pageData.total' size="small" show-total show-elevator show-sizer @on-change="changePage" @on-page-size-change="changePageSize"></Page>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
	 import  BaseImg  from '../../assets/js/baseImg'

     export default {
        mixins: [BaseImg],
        watch: {
            query:'queryChange'
        },
        data () {
            return {
                module: 'upload',//对basejs的传入模块
                modal1: false,//修改按钮
                isRemoveModal:false,
                okremove_loading:false,//批量删除模态框确定按钮loading加载

                columns7: [
                	{
                        type: 'selection',
                        width: 60,
                        fixed:'left',
                        align: 'center'
                    },
                    {
						title: '图片名称',
                        key: 'filename',
                        fixed:'left',
                        ellipsis: true,
                        width: 240,
                        // render: (h, params) => {
                        //     return h('div', [
                        //         h('Icon', {
                        //             props: {
                        //                 type: 'paper-airplane'
                        //             }
                        //         }),
                        //         h('strong', params.row.title)
                        //     ]);
                        // }
                    },
                    {
                        title: '大小',
                        key: 'size',
                        width: 120,
                        ellipsis: true,
                    },
                    {
                        title: '类型',
                        key: 'mimetype',
                        width: 160,
                        ellipsis: true,
					},
                    {
                        title: '路径',
                        key: 'path',
                        width: 240,
                        ellipsis: true,
                    },
                    {
                        title: '所属栏目',
                        key: 'fieldname',
                        width: 160,
                        ellipsis: true,
                    },
                    {
                        title: '发布者测',
                        key: 'encoding',
                        width:80,
                        ellipsis: true,
					},
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        fixed:'right',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.row)
                                            //利用params取到这条数据的唯一id
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index,params.row._id,params.row.filename)
                                        }
                                    }
                                }, '删除'),
                                // h('Button', {
                                //     props: {
                                //         type: 'error',
                                //         size: 'small'
                                //     },
                                //     on: {
                                //         click: () => {
                                //             this.showComment(params.index,params.row._id)
                                //         }
                                //     }
                                // }, '评论')
                            ]);
                        }
                    }
                ],
            }
        },
        props: ['query'],
        methods: {
            queryChange () {
                    this.imageTableData = this.query;
                if (this.query.length !=0 ) {//对分页的总数据的重构
                    this.pageData.total = this.query.length 
                } else {
                    this.pageData.total = 0;
                }
            },
            warning () {//警告提示框
                this.$Message.warning('使用批量删除才可以删除多项哦');
            },
            selectAll (selection) {//选中多项的时候触发
                this.select = selection;
            },
           
            show (data) {
				//获取数据的id唯一的数据
				console.log(data);
            	this.modal1 = true;
                this.formValidate.filename = data.filename;
                this.formValidate.size = data.size;
                this.formValidate.mimetype = data.mimetype;
                this.formValidate.path = data.path;
				this.formValidate.id = data._id;
				
				this.formValidate.fieldname = data.fieldname;
				this.formValidate.encoding = data.encoding;
				
            },
            ok () {
                this.$Message.info('点击了确定');
            },
            cancel () {
                this.$Message.info('点击了取消');
            },
            handleSelectAll (status) {//全选数据
                this.$refs.selection.selectAll(status);
            },
            handleSubmit (name) {//修改数据	,添加数据
                if (this.formValidate.id == null) {
                    console.log('这里进行提交新数据');
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            this.formDataCreate ();
                            this.$Message.success('提交成功!');


                        } else {
                            this.$Message.error('表单验证失败!');
                        }
                    })
                }else {
                    console.log('修改');
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            console.log(this.formValidate.id);
                            this.formDataUpdate (this.formValidate.id);
                            this.$Message.success('修改成功!');
                        } else {
                            this.$Message.error('表单验证失败!');
                        }
                    })
                }
                
            },
        }
    }
</script>

<style type="text/css" lang='scss' scoped>
	     .container{
		width: auto;
		.y_top{
			padding:20px;
			.interval{
				margin:0 12px;
			}
		}
		.y_bottom{
			.y_table{
                position: relative
			}
			.y_tableBottom{
				margin:18px 0;
				.y-tableBtn{
					text-align:center
				}
				.y_tablePage{
					line-height: 32px;
					text-align: center;
                    margin-bottom: 110px;
				}
			}
		}
	}           

</style>